解析網頁動效設計三大核心流程

偷偷告訴你，動效真的不難！
Vue 的過渡類別是我的小秘技，簡單又實用！

今天帶你輕鬆學會，讓每個進場和離場的效果都那麼順滑～

直覺設計的重要性

在網站開發中，使用者無法看到後端的程式碼，但能夠瞬間捕捉到網站的外觀與動效設計。
好的設計能夠快速吸引使用者注意，並提升整體體驗。
作為一個喜歡逛網拍的女生，我深有感觸。
如果網站介面不夠直覺、操作繁瑣，我可能會直接關閉頁面。因此，直接不買了！（省起來）
所以直覺且流暢的動效設計對於網站成功非常重要。

從開始到結束：三大核心階段

網頁動效設計可以分為三個相互關聯且循序漸進的階段：初始化與加載（開始）、瀏覽與互動（過程）、結尾與退出（結束）。這三個階段共同構成了完整的使用者體驗：

• 初始化與加載：通過動效減少等待時間的焦慮，引導使用者順利進入主內容。
• 瀏覽與互動：動效不僅提升使用者體驗，還能強化信息傳達效果。
• 結尾與退出：使用平滑的動效，為使用者提供良好的離開或頁面跳轉體驗。

1. 網頁初始化與加載階段

• 初始加載動效
  • 要點：
    • 減少頁面加載時的感知延遲
    • 避免出現空白頁面
  • 應用示例：進度條、頁面載入時的淡入淡出效果等。

當頁面加載時，使用簡單的視覺提示讓使用者知道頁面正在準備中，這樣可以有效減少等待時的煩躁感。
加載動效應該保持簡單，不搶眼，但要提供足夠的回饋。
此外，在初始化過程中容易出現閃白畫面，因此要特別注意過渡階段的處理，避免空窗期。

• 過渡動效
  • 要點：
    • 平滑地引導使用者進入頁面主內容
    • 避免視覺切換過於突兀
  • 應用示例：頁面主視覺元素的滑入或縮放過渡效果。

在頁面加載完成後，利用過渡動效可以讓使用者順暢地進入主內容區域，避免突然的視覺跳轉。
這種動效能讓頁面切換更加自然、流暢，提升使用者的體驗。

2. 使用者瀏覽與互動階段

3. 網頁結束與退出階段

• 結尾過渡效果
  • 當使用者準備離開頁面或跳轉至其他頁面時，使用平滑的結尾動效來完成此次互動，避免突兀的中斷。
  • 應用示例：頁面滑出動效、逐漸淡出效果。

實作：一個緊張回饋感強烈的按鈕

這裡展示了一個具有「緊張回饋」的按鈕設計，這種按鈕反應快速，讓使用者能夠感受到互動的即時性。

• 完整程式碼

<script lang="ts" setup></script>

<template>
  <div class="grid w-full grid-cols-[repeat(auto-fit,_minmax(400px,_1fr))]">
    <transition name="fade">
      <div
        class="grid h-screen items-center justify-center bg-[var(--bg-color)]"
        :style="{ '--bg-color': '#f1c40f' }"
      >
        <button
          class="btn-jittery text-8 font-mono bg-transparent
             text-white 
             border-3 border-solid border-white rounded-full px-8 py-3 
             outline-none cursor-pointer tracking-[2px]
             animate-[jittery_4s_infinite] hover:animate-[heartbeat_0.2s_infinite]
             "
        >
          Click Me!
        </button>
      </div>
    </transition>
  </div>
</template>

<style>
/* Vue Transition Styles */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@keyframes jittery {
  0%, 50% { transform: scale(1); }
  10% { transform: scale(0.9); }
  15% { transform: scale(1.15); }
  20% { transform: scale(1.15) rotate(-5deg); }
  25% { transform: scale(1.15) rotate(5deg); }
  30% { transform: scale(1.15) rotate(-3deg); }
  35% { transform: scale(1.15) rotate(2deg); }
  40% { transform: scale(1.15) rotate(0); }
}

@keyframes heartbeat {
  50% {
    transform: scale(1.1);
  }
}
</style>

Vue 的 transition 過渡樣式效果

.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

我們利用<transition name="fade"> 來實現了這兩種效果

• 進場效果：當元素從隱藏狀態進入畫面時，Vue 會套用 CSS 樣式類別 fade-enter-active 和 fade-enter-from。
• 離場效果：當元素離開畫面時，Vue 會套用 fade-leave-active 和 fade-leave-to 樣式類別。

主動畫 @keyframes 的設計與應用

按鈕的動畫效果

按鈕的主要動畫效果透過 @keyframes jittery 與 @keyframes heartbeat 來實現，這兩個動畫增強了使用者的互動體驗：

@keyframes jittery {
  0%, 50% { transform: scale(1); }
  10% { transform: scale(0.9); }
  15% { transform: scale(1.15); }
  20% { transform: scale(1.15) rotate(-5deg); }
  25% { transform: scale(1.15) rotate(5deg); }
  30% { transform: scale(1.15) rotate(-3deg); }
  35% { transform: scale(1.15) rotate(2deg); }
  40% { transform: scale(1.15) rotate(0); }
}

@keyframes jittery 定義了緊張的抖動效果：

• 這個動畫會讓按鈕產生一系列不規則的縮放和旋轉，模擬出緊張不安的感覺。
• 0%, 50%：保持正常大小，沒有旋轉。
• 10%：按鈕縮小至 0.9 倍，營造出按鈕按下的瞬間。
• 15%-40%：按鈕逐漸放大到 1.15 倍並伴隨著小幅度的左右旋轉，模擬緊張狀態下的快速晃動。

@keyframes heartbeat {
  50% {
    transform: scale(1.1);
  }
}

@keyframes heartbeat 定義了心跳動畫：

• 這個動畫會讓按鈕在懸停時有一個小幅度的縮放效果，模仿心跳的節奏，讓按鈕看起來更有活力。
• 50%：按鈕稍微放大 1.1 倍，然後回到原狀。

利用UnoCSS樣式結合效果

<button
  class="btn-jittery text-8 font-mono bg-transparent
         text-white 
         border-3 border-solid border-white rounded-full px-8 py-3 
         outline-none cursor-pointer tracking-[2px]
         animate-[jittery_4s_infinite] hover:animate-[heartbeat_0.2s_infinite]"
>
  Click Me!
</button>

• animate-[jittery_4s_infinite]：讓按鈕執行 jittery 動畫，持續 4 秒，並且無限循環。
• hover:animate-[heartbeat_0.2s_infinite]：當滑鼠懸停時，動畫切換為 heartbeat，持續 0.2 秒且無限循環，為使用者提供即時反饋感。

結語

動效真的不難，只要輕鬆玩一玩，就能讓網站充滿樂趣！
讓我們一起享受互動設計的快感吧！ ⸜( •ᴗ• )⸝